<template>
	<div class="sort-chart-box">
		<div id="sortChart"></div>
	</div>
</template>
<script setup>
import { ref, reactive } from "vue";
import echarts from "@/common/utils/echarts.js";

// let xArr = ref(["名称1", "名称2", "名称3", "名称4", "名称5"]);
// let dataArr = ref([55, 48, 42, 38, 35]);
let colorArr = ["#FFC068", "#5BFFB1", "#95A1FF", "#3BD0FF", "#008EE7"];

let sortChartRef = null;
let initSortChartData = (xArr, dataArr) => {
	let dataUpdate = dataArr.map((item, i) => {
		let color = "";
		if (i % 5 === 0) {
			color = colorArr[0];
		} else if (i % 5 === 1) {
			color = colorArr[1];
		} else if (i % 5 === 2) {
			color = colorArr[2];
		} else if (i % 5 === 3) {
			color = colorArr[3];
		} else if (i % 5 === 4) {
			color = colorArr[4];
		}
		return {
			value: item,
			label: {
				show: true,
				position: "top",
				color,
			},
			itemStyle: {
				color: {
					x: 0, //右
					y: 1, //下
					x2: 0, //左
					y2: 0, //上
					colorStops: [
						{
							offset: 0,
							color: "rgba(0,0,0,0)",
						},
						{
							offset: 1,
							color,
						},
					],
				},
			},
		};
	});
	let options = reactive({
		grid: {
			right: "10%",
			top: "15%",
			bottom: "40%",
		},
		xAxis: {
			type: "category",
			data: xArr,
			axisTick: {
				show: false,
			},
			axisLine: {
				show: false,
			},
			axisLabel: {
				color: "#E4F2FF",
				interval: 0,
				rotate: -30,
				align: "left",
				// width:20
				// textShadowColor: "#56CAFF",
				// textShadowBlur: "4",
			},
		},
		yAxis: [
			{
				type: "value",
				axisLabel: {
					show: false,
				},
				splitLine: {
					show: false,
				},
			},
		],
		series: [
			{
				type: "pictorialBar",
				data: dataUpdate,
				symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
				barCategoryGap: "-60%",
			},
		],
	});
	sortChartRef.setOption(options);
};
const initSortChart = (xArr, dataArr) => {
	sortChartRef = echarts.init(document.getElementById("sortChart"));
	initSortChartData(xArr, dataArr);
};
defineExpose({
	initSortChart,
});
</script>
<style lang="scss" scoped>
.sort-chart-box {
	width: 100%;
	height: 100%;

	#sortChart {
		width: 100%;
		height: 100%;

		:deep(.tooltipBox) {
			background: url("@/assets/screenImg/powerImg/leftBg.png") no-repeat;
			background-size: 100% 100%;
		}
	}
}
</style>
